<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { Page } from '@vben/common-ui';
import { ContentWrap } from '#/components/content-wrap';
import {
  Steps,
  Button,
  Form,
  Input,
  DatePicker,
  message,
  Card,
} from 'ant-design-vue';
// 移除不支持的图标
import { createOrder, createOrderServiceItems, confirmOrder } from '#/api/wedding';
import DressSelector from './modules/dress-selector.vue';
import ArtistSelector from './modules/artist-selector.vue';
import PhotographerSelector from './modules/photographer-selector.vue';
import OrderSummary from './modules/order-summary.vue';

const router = useRouter();
const currentStep = ref(0);
const loading = ref(false);

// 订单基本信息
const orderFormRef = ref();
const orderForm = reactive({
  customerName: '',
  customerPhone: '',
  weddingDate: '',
});

const orderFormRules = {
  customerName: [{ required: true, message: '请输入客户姓名', trigger: 'blur' }],
  customerPhone: [{ required: true, message: '请输入客户电话', trigger: 'blur' }],
  weddingDate: [{ required: true, message: '请选择婚期', trigger: 'change' }],
};

// 选择的服务
const selectedServices = reactive({
  dresses: [] as any[],
  artists: [] as any[],
  photographers: [] as any[],
});

const createdOrderId = ref('');

const steps = [
  { title: '客户信息', description: '填写客户基本信息' },
  { title: '选择婚纱', description: '挑选心仪的婚纱' },
  { title: '选择化妆师', description: '预约化妆服务' },
  { title: '选择摄影师', description: '预约摄影服务' },
  { title: '确认订单', description: '核对并提交订单' },
];

// 下一步
const handleNext = async () => {
  if (currentStep.value === 0) {
    // 验证客户信息
    await orderFormRef.value?.validate();
    
    // 创建订单
    loading.value = true;
    try {
      const result = await createOrder({
        customerId: '', // 可以根据实际需要设置
        customerName: orderForm.customerName,
        customerPhone: orderForm.customerPhone,
        weddingDate: orderForm.weddingDate,
      });
      
      if (result.success && result.data) {
        createdOrderId.value = result.data.orderId;
        message.success('订单创建成功');
        currentStep.value++;
      }
    } finally {
      loading.value = false;
    }
  } else if (currentStep.value < steps.length - 1) {
    currentStep.value++;
  }
};

// 上一步
const handlePrev = () => {
  if (currentStep.value > 0) {
    currentStep.value--;
  }
};

// 提交订单
const handleSubmit = async () => {
  loading.value = true;
  try {
    // 添加所有选择的服务项
    for (const dress of selectedServices.dresses) {
      await createOrderServiceItems({
        orderId: createdOrderId.value,
        serviceType: 'DRESS',
        resourceCode: dress.dressCode,
        resourceName: dress.dressName,
        price: dress.rentalPrice,
        quantity: 1,
      });
    }
    
    for (const artist of selectedServices.artists) {
      await createOrderServiceItems({
        orderId: createdOrderId.value,
        serviceType: 'MAKEUP',
        resourceCode: artist.artistCode,
        resourceName: artist.artistName,
        price: artist.servicePrice,
        quantity: 1,
      });
    }
    
    for (const photographer of selectedServices.photographers) {
      await createOrderServiceItems({
        orderId: createdOrderId.value,
        serviceType: 'PHOTOGRAPHY',
        resourceCode: photographer.photographerCode,
        resourceName: photographer.photographerName,
        price: photographer.servicePrice,
        quantity: 1,
      });
    }
    
    // 确认订单
    await confirmOrder(createdOrderId.value);
    
    message.success('订单提交成功');
    router.push('/wedding/order');
  } catch (error) {
    message.error('订单提交失败');
  } finally {
    loading.value = false;
  }
};

// 取消
const handleCancel = () => {
  router.back();
};
</script>

<template>
  <Page auto-content-height>
    <ContentWrap>
      <Card>
        <Steps :current="currentStep" :items="steps" class="mb-8" />

        <!-- 步骤1: 客户信息 -->
        <div v-show="currentStep === 0">
          <Form
            ref="orderFormRef"
            :model="orderForm"
            :rules="orderFormRules"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 12 }"
          >
            <Form.Item label="客户姓名" name="customerName">
              <Input v-model:value="orderForm.customerName" placeholder="请输入客户姓名" />
            </Form.Item>
            <Form.Item label="客户电话" name="customerPhone">
              <Input v-model:value="orderForm.customerPhone" placeholder="请输入客户电话" />
            </Form.Item>
            <Form.Item label="婚期" name="weddingDate">
              <DatePicker
                v-model:value="orderForm.weddingDate"
                placeholder="请选择婚期"
                class="w-full"
              />
            </Form.Item>
          </Form>
        </div>

        <!-- 步骤2: 选择婚纱 -->
        <div v-show="currentStep === 1">
          <DressSelector v-model:selected="selectedServices.dresses" />
        </div>

        <!-- 步骤3: 选择化妆师 -->
        <div v-show="currentStep === 2">
          <ArtistSelector v-model:selected="selectedServices.artists" />
        </div>

        <!-- 步骤4: 选择摄影师 -->
        <div v-show="currentStep === 3">
          <PhotographerSelector v-model:selected="selectedServices.photographers" />
        </div>

        <!-- 步骤5: 确认订单 -->
        <div v-show="currentStep === 4">
          <OrderSummary
            :order-info="orderForm"
            :services="selectedServices"
          />
        </div>

        <!-- 操作按钮 -->
        <div class="mt-8 flex justify-center space-x-4">
          <Button @click="handleCancel">取消</Button>
          <Button v-if="currentStep > 0" @click="handlePrev">
            上一步
          </Button>
          <Button
            v-if="currentStep < steps.length - 1"
            type="primary"
            @click="handleNext"
            :loading="loading"
          >
            下一步
          </Button>
          <Button
            v-if="currentStep === steps.length - 1"
            type="primary"
            @click="handleSubmit"
            :loading="loading"
          >
            提交订单
          </Button>
        </div>
      </Card>
    </ContentWrap>
  </Page>
</template>

